<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>More Like This - User {{ user_id }}, Item {{ item_id }}</title>
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="{{ url_for('static', filename='images/favicon32.png') }}"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="{{ url_for('static', filename='images/favicon16.png') }}"
    />
    <link
      rel="icon"
      type="image/x-icon"
      sizes="32x32"
      href="{{ url_for('static', filename='images/favicon.ico') }}"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/style.css') }}"
    />
  </head>
  <body>
    <div class="container">
      <header class="mt-4 mb-5">
        <h1 class="text-center">More Like This</h1>
        <h3 class="text-center text-muted">
          For User {{ user_id }} - Similar to {% if item_info is not none and
          not item_info.empty %} "{{ item_info.iloc[0].movie_title }}" {% else
          %} Item {{ item_id }} {% endif %}
        </h3>
        <p class="text-center">
          <a href="{{ url_for('index') }}" class="btn btn-outline-primary"
            >← Back to Home</a
          >
          <a
            href="{{ url_for('recommend') }}?user_id={{ user_id }}"
            class="btn btn-outline-success"
            >View All Recommendations</a
          >
        </p>
      </header>

      <div class="row">
        <!-- Recommendations -->
        <div class="col-md-8">
          <div class="card shadow">
            <div class="card-header bg-info text-white">
              <h4 class="mb-0">Similar Items You Might Like</h4>
            </div>
            <div class="card-body">
              {% if recommendations.empty %}
              <div class="alert alert-warning">
                No similar items could be found for user {{ user_id }} based on
                item {{ item_id }}. This might happen if you've already rated
                all similar items.
              </div>
              {% else %}
              <p>
                Found {{ recommendations|length }} similar items in {{
                "%.2f"|format(generation_time) }} seconds using {{
                model_params.similarity_method }} similarity.
              </p>

              <!-- Recommendations Visualization -->
              {% if img_path %}
              <div class="text-center mb-4">
                <img
                  src="{{ img_path }}"
                  class="img-fluid"
                  alt="Recommendations Visualization"
                />
              </div>
              {% endif %}

              <!-- Recommendations Table -->
              <div class="table-responsive">
                <table class="table table-striped table-hover">
                  <thead>
                    <tr>
                      <th>Rank</th>
                      <th>Movie Title</th>
                      <th>Predicted Rating</th>
                      <th>Similarity</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for i, rec in recommendations.iterrows() %}
                    <tr>
                      <td>{{ loop.index }}</td>
                      <td>
                        <a
                          href="{{ url_for('similar_items') }}?item_id={{ rec.movie_id }}"
                        >
                          {{ rec.movie_title }}
                        </a>
                      </td>
                      <td>
                        <div class="rating-stars">
                          <div class="rating-value">
                            {{ "%.2f"|format(rec.predicted_rating) }}
                          </div>
                          <div class="stars">
                            {% set full_stars = rec.predicted_rating|int %} {%
                            set half_star = (rec.predicted_rating - full_stars)
                            >= 0.5 %} {% for i in range(full_stars) %}
                            <span class="star full">★</span>
                            {% endfor %} {% if half_star %}
                            <span class="star half">★</span>
                            {% endif %} {% for i in range(5 - full_stars - (1 if
                            half_star else 0)) %}
                            <span class="star empty">☆</span>
                            {% endfor %}
                          </div>
                        </div>
                      </td>
                      <td>{{ "%.4f"|format(rec.similarity) }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              {% endif %}
            </div>
          </div>
        </div>

        <!-- Reference Item Info -->
        <div class="col-md-4">
          <!-- Reference Item Information -->
          {% if item_info is not none and not item_info.empty %}
          <div class="card shadow mb-4">
            <div class="card-header bg-primary text-white">
              <h4 class="mb-0">Reference Movie</h4>
            </div>
            <div class="card-body">
              <h5>{{ item_info.iloc[0].movie_title }}</h5>
              <p><strong>Movie ID:</strong> {{ item_id }}</p>

              <!-- Add more movie information if available -->
              {% if 'release_date' in item_info.columns and
              item_info.iloc[0].release_date %}
              <p>
                <strong>Release Date:</strong> {{ item_info.iloc[0].release_date
                }}
              </p>
              {% endif %}

              <!-- Add genre information if available -->
              {% if 'Action' in item_info.columns %}
              <p>
                <strong>Genres:</strong>
                {% set genres = [] %} {% for genre in ['Action', 'Adventure',
                'Animation', 'Children', 'Comedy', 'Crime', 'Documentary',
                'Drama', 'Fantasy', 'Film-Noir', 'Horror', 'Musical', 'Mystery',
                'Romance', 'Sci-Fi', 'Thriller', 'War', 'Western'] %} {% if
                item_info.iloc[0][genre] == 1 %} {% set _ = genres.append(genre)
                %} {% endif %} {% endfor %} {{ genres|join(', ') }}
              </p>
              {% endif %}

              <!-- User's rating for this item if available -->
              {% if user_rating is not none %}
              <div class="alert alert-success">
                <strong>You rated this movie:</strong>
                <div class="rating-stars">
                  <div class="rating-value">{{ user_rating }}</div>
                  <div class="stars">
                    {% for i in range(user_rating|int) %}
                    <span class="star full">★</span>
                    {% endfor %} {% for i in range(5 - user_rating|int) %}
                    <span class="star empty">☆</span>
                    {% endfor %}
                  </div>
                </div>
              </div>
              {% endif %}

              <!-- Find more similar items -->
              <div class="mt-3">
                <a
                  href="{{ url_for('similar_items') }}?item_id={{ item_id }}"
                  class="btn btn-outline-primary btn-block"
                >
                  Find Similar Movies
                </a>
              </div>
            </div>
          </div>
          {% endif %}

          <!-- Explanation Card -->
          <div class="card shadow">
            <div class="card-header bg-secondary text-white">
              <h4 class="mb-0">How It Works</h4>
            </div>
            <div class="card-body">
              <p>The "More Like This" feature works by:</p>
              <ol>
                <li>Finding items that are similar to your reference movie</li>
                <li>
                  Taking into account your personal preferences and rating
                  history
                </li>
                <li>
                  Recommending items that are both similar to the reference and
                  likely to match your taste
                </li>
              </ol>
              <p>
                <strong>Similarity Method:</strong> {{
                model_params.similarity_method|replace('_', ' ')|title }}
                <br />
                <strong>Similar Items Considered:</strong> {{ model_params.k }}
              </p>
              <p>
                This hybrid approach combines content similarity with
                personalized predictions to help you discover new movies you'll
                love.
              </p>
            </div>
          </div>

          <!-- Try with another movie -->
          <div class="card shadow mt-4">
            <div class="card-header bg-success text-white">
              <h4 class="mb-0">Try Another Movie</h4>
            </div>
            <div class="card-body">
              <form action="{{ url_for('more_like_this') }}" method="post">
                <input type="hidden" name="user_id" value="{{ user_id }}" />
                <div class="form-group">
                  <label for="item_id">Movie ID:</label>
                  <div class="input-group">
                    <input
                      type="number"
                      class="form-control"
                      id="item_id"
                      name="item_id"
                      min="1"
                      required
                    />
                    <div class="input-group-append">
                      <button
                        class="btn btn-outline-secondary"
                        type="button"
                        id="randomItemBtn"
                      >
                        Random
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="num_recommendations"
                    >Number of Recommendations:</label
                  >
                  <input
                    type="number"
                    class="form-control"
                    id="num_recommendations"
                    name="num_recommendations"
                    min="1"
                    max="50"
                    value="10"
                  />
                </div>
                <button type="submit" class="btn btn-success btn-block">
                  Find More Like This
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <footer class="mt-5 mb-3 text-center text-muted">
        <p>&copy; 2025 Item-Based Collaborative Filtering Project</p>
      </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function() {
          // Get random item ID
          $('#randomItemBtn').click(function() {
              const maxItemId = {{ model_params.n_items }};
              const randomItemId = Math.floor(Math.random() * maxItemId) + 1;
              $('#item_id').val(randomItemId);
          });
      });
    </script>
  </body>
</html>
